<template>
  <section class="cart">
    <div class="nav">
      <div class="left">
        <p>济南市历城区</p>
      </div>
      <div class="right">
        <p v-show="navRightShow">编辑商品</p>
        <p v-show="!navRightShow">
          <span>快速清理</span>
          <span>完成</span>
        </p>
      </div>
    </div>
    <div class="content">
      <cube-checkbox class="cc" v-model="checked">
        <div class="box">
          <div class="left">
            <img src="//img10.360buyimg.com/mobilecms/s117x117_jfs/t1/52945/37/11093/142894/5d80a8d1E73a1f346/a161572787d31ed6.jpg!q70.dpg.webp"/>
          </div>
          <div class="right">
            <p class="name">依波（EBOHR）手表原创设计海鸥系列男士手表 全自动机械表休闲时尚防水镂空24小时日历瑞士风格腕表 【天翼系列】沉稳黑钢 男款【赠送皮带】</p>
            <p>
              <span>满2995减500</span>
            </p>
            <div>
              <div class="price">￥1498.00</div>
              <div>
                <span class="left"></span>
                <span class="center">0</span>
                <span class="right"></span>
              </div>
            </div>
          </div>
        </div>
      </cube-checkbox>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Cart',
  data () {
    return {
      navRightShow: true,
      checked: false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .cart >>> .cube-checkbox-ui
    top 2px
  .cart >>> .cube-checkbox_checked .cube-checkbox-ui i
    color #E93B3D
    font-size 20px
  .cart >>> .cube-checkbox-ui::before, .cube-checkbox-ui i
    font-size 20px
    position absolute
    top 0
    left 0
  .cart
    .nav
      background #fff
      padding 16px 10px
      display flex
      justify-content space-around
      box-sizing border-box
      border-bottom 1px solid #f6f6f6
      .left
        width 50%
        font-size 14px
        color #999
        position relative
        p
          padding-left 15px
      .right
        text-align right
        width 50%
        font-size 14px
        color #333
      .left:before
        content: ''
        position absolute
        top 50%
        left 0
        margin-top -8px
        background url("//wq.360buyimg.com/wxsq_trade/cart_vue/main/images/sprite.img_default_437_75a2ce3f.png")no-repeat
        background-position -100px -62px
        background-size 116px 110px
        width 13px
        height 15px
    .content
      .cube-checkbox
        padding 0 10px
</style>
